<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>24点</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    {% load static %}
    <!--suppress HtmlUnknownTarget -->
    <link rel="stylesheet" href="{% static 'css/navbar.css' %}">
</head>
<body>
{% include "includes/navbar.html" %}
{% verbatim %}
<h1><span style="color: blue; ">游戏规则</span></h1>
<p>请将下面的4个数字，通过运算得到24。</p>
<p>可用的运算符有：+ - * / ( ) </p>
<p>所有的数必须全部使用且只能使用一次。</p>
<div id="app">
    <h2 v-text="question"></h2>
    <label>
        <input type="text" v-model="answer" @keyup.enter="submit">
    </label>
    <button @click="submit">提交</button>
    <button @click="create_question">下一题</button>
    <h2 v-html="result"></h2>
</div>
<script>
    const bad = ["1111", "1112", "1113", "1114", "1115", "1116", "1117",
        "1119", "1122", "1123", "1124", "1125", "1133", "1159", "1167",
        "1177", "1178", "1179", "1189", "1199", "1222", "1223", "1299",
        "1355", "1499", "1557", "1558", "1577", "1667", "1677", "1678",
        "1777", "1778", "1899", "1999", "2222", "2226", "2279", "2299",
        "2334", "2555", "2556", "2599", "2677", "2777", "2779", "2799",
        "2999", "3358", "3467", "3488", "3555", "3577", "4459", "4466",
        "4467", "4499", "4779", "4999", "5557", "5558", "5569", "5579",
        "5777", "5778", "5799", "5899", "5999", "6667", "6677", "6678",
        "6699", "6777", "6778", "6779", "6788", "6999", "7777", "7778",
        "7779", "7788", "7789", "7799", "7888", "7899", "7999", "8888",
        "8889", "8899", "8999", "9999"];
    let problem;
    new Vue({
        el: '#app',
        data: {
            question: '',
            answer: '',
            result: ''
        },
        methods: {
            create_question() {//生成问题
                let temp;
                do {
                    temp = [];
                    while (temp.length < 4) {
                        let num = Math.floor(Math.random() * 9) + 1;
                        if (!temp.includes(num)) {
                            temp.push(num);
                        }
                    }
                } while (bad.includes(Array.from(temp).sort().join("")));//Array.from用于拷贝
                problem = temp.join("");
                this.question = temp.join(" ");
                this.result = '';
            },
            submit() {
                const check = function (s) {//检测用户的答案是否正确
                    s = s.replace(/ /g, '');
                    if (!/^[\d+\-*/^()]+$/.test(s)) return false;
                    let nums = s.replace(/\D/g, '');
                    if (nums.length !== 4) return false;
                    if (Array.from(problem).sort().join("") !== Array.from(nums).sort().join("")) return false;
                    return eval(s) === 24;
                };
                if (check(this.answer)) {
                    this.result = '<span style="color: green; ">回答正确</span>';
                } else {
                    this.result = '<span style="color: red; ">回答错误</span>';
                }
            },
        },
        mounted() {
            this.create_question();
        }
    });
</script>
</body>
{% endverbatim %}
</html>
